<template>
  <div class="w">
    <!-- 标题 -->
    <div class="title-area">
      <span>
        评测任务新增
      </span>
    </div>

    <!-- 表单区 -->
    <Form style="margin-top: 35px;" 
      name="form" 
      ref="form" 
      :labelCol="labelCol" 
      :wrapperCol="wrapperCol" 
      :initialValues="{}">

      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="code" label="评测编号">
            <Input style="width: 100%" disabled />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="name" label="评测名称">
            <Input placeholder="请输入评测名称" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="product" label="针对产品">
            <Cascader placeholder="请选择厂商产品" style="width: 100%" :options="productOptions" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="case" label="使用用例">
            <Input placeholder="请选择使用用例" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="description" label="用例描述">
            <Input placeholder="请输入用例描述" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="env" label="适用场景">
            <Input placeholder="请输入适用场景" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="input" label="输入">
            <Input placeholder="请输入" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="output" label="输出">
            <Input placeholder="请输入" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="timestamp" label="开始时间">
            <DatePicker placeholder="请选择开始时间" mode="date" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="5">
          <FormItem name="resource" label="资源">
            <Cascader placeholder="请选择厂商产品" style="width: 100%" :options="resourceOptions" />
          </FormItem>
        </Col>
      </Row>
      <Row style="margin-top: 50px;">
        <Col :span="12" :offset="6">
          <FormItem :wrapperCol="{ span: 24 }" style="text-align: center">
            <Button style="width: 100px;" type="primary" @click="submit">提 交</Button>
            <Button style="width: 100px; margin-left: 20px;" @click="cancel">取 消</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
export default {
    name: "app",
    data() {
        return {
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 15
        },
        productOptions: [
            {
              value: 'kb',
              label: '金仓股份有限公司',
              children: [
                  { value: 'v1', label: 'v1.0 企业版' },
                  { value: 'v2', label: 'v2.0 企业版' },
                  { value: 'v1s', label: 'v1.0 安全版' }
              ]
            },
            {
              value: 'dm',
              label: '达梦股份有限公司',
              children: [
                  { value: 'v1', label: 'v1.0 企业版' },
                  {  value: 'v2', label: 'v2.0 企业版' }
              ]
            },
            {
              value: 'hg',
              label: '瀚高基础软件',
              children: [
                  { value: 'v1', label: 'v1.0 企业版' },
                  { value: 'v1s', label: 'v1.0 安全版' }
              ]
            }
        ],
        resourceOptions: [
            {
              value: 'py',
              label: '物理机',
              children: [
                  { value: 'p1', label: '192.168.33.1' },
                  { value: 'p2', label: '192.168.33.2' },
                  { value: 'p3', label: '192.168.33.3' }
              ]
            },
            {
              value: 'vir',
              label: '虚拟机',
              children: [
                  { value: 'v1', label: '192.168.139.74' },
                  { value: 'v2', label: '192.168.139.75' }
              ]
            },
            {
              value: 'con',
              label: '容器',
              children: [
                  { value: 'c1', label: '192.168.100.200' },
                  { value: 'c2', label: '192.168.100.201' },
                  { value: 'c3', label: '192.168.100.202' },
                  { value: 'c4', label: '192.168.100.203' },
                  { value: 'c5', label: '192.168.100.204' }
              ]
            }
        ],
    }
  },
  methods: {
      submit: function () {
          console.log("Submit...");
      },
      cancel: function () {
          this.$router.push('/taskMgr');
      }
  }
}
</script>

<style scoped>
  .w {
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }
</style>
